<template>
	<view class="pending-orders">
		<u-toast ref="uToast"></u-toast>
		<view class="box">
			<view class="address">
				<view class="address_map">
					<view class="code">
						{{detailObj.num ? detailObj.num.replace(/(\d{1})\d{4}(\d{1})/, '$1****$2') : '无'}}
					</view>
					<view class="code_title">
						取货码
					</view>
					<view class="map">
						<image style="width: 100%; height: 100%;" src="/static/img/map.png" mode=""></image>
					</view>
					<!-- <map :latitude="latitude" :longitude="longitude" scale="15" :markers="markers" :polyline="polyline"></map> -->
				</view>
				<view class="pick-up_address">
					<view class="pick-up">
						取件地址
					</view>
					<view class="ads">
						{{detailObj.barArea}}
					</view>
				</view>
				<view class="shipping_address">
					<view class="shipping">
						配送地址
					</view>
					<view class="ads">
						{{detailObj.userAddrVO.addr}}
					</view>
					<view class="user">
						<view class="info">
							<span>{{detailObj.userAddrVO.consignee}}</span>
							<span>{{detailObj.userAddrVO.mobile}}</span>
						</view>
						<img style="width: 60rpx; height: 60rpx;" src="@/static/img/phone.png" alt="" />
					</view>
				</view>
			</view>
			<view class="shop">
				<view class="shop_title">
					商品信息
				</view>
				<view class="shop_content">
					<img style="width: 150rpx; height: 150rpx; display: block;" :src="detailObj.barSpuVO.mainImgUrl" alt="" />
					<view style="width: 76%; display: flex; flex-direction: column; justify-content: space-between;">
						<view class="">
							{{detailObj.barSpuVO.name}}
						</view>
						<view class="">
							X<span>{{detailObj.count}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" @click="btnOrderUpdate(item)">
			接单
		</view>
	</view>
</template>

<script>
	import { riderAcceptById, getById } from '@/api/user.js'
	import amapFile from '@/libs/amap-wx.130.js'
	export default {
		data() {
			return {
				detailObj: {},
				title: 'map',
				latitude: '', // 万达的位置
				longitude: '', // 万达管家的位置
				distance: 0,
				duration: 0,
				maxDuration: false,
				curentLatitude: '',
				curentLongitude: '',
				active: 'car',
				polyline: null,
				markers: []
			}
		},
		async onLoad(options) {
			this.id = options.id || ''
			await uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					this.latitude = ''
					this.longitude = ''
				},
			})
			let data = await getById({barRiderOrderId: this.id})
			this.detailObj = data.data
			this.markers.push({
				latitude: this.detailObj.addrLat,
				longitude: this.detailObj.addrLon,
				width: '0',
				height: '0',
				label: {
					content: '取',
					color: '#F76350',
					bgColor: '#fff',
					padding: 5,
					borderRadius: 4
				}
			},{
				latitude: this.detailObj.userAddrVO.lat,
				longitude: this.detailObj.userAddrVO.lng,
				width: '0',
				height: '0',
				label: {
					content: '送',
					color: '#F76350',
					bgColor: '#fff',
					padding: 5,
					borderRadius: 4
				}
			})
		},
		methods: {
			btnOrderUpdate() {
				riderAcceptById({barRiderOrderId: this.detailObj.riderOrderId}).then(async res=>{
					if(res.code == '00000') {
						if (res.code == '00000') {
							await this.$refs.uToast.show({
								type: 'success',
								message: '您已成功接单，请尽快送达',
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
								duration: 3000
							})
							await setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							},3000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pending-orders {
		padding: 20rpx;
		background-color: #F7F8FA;
		display: flex;
		flex-direction: column;
		height: 97vh;

		.box {
			flex: 1;
			flex-grow: grow;
			overflow: auto;

			.address {
				padding: 40rpx 20rpx;
				background-color: #fff;

				.address_map {
					text-align: center;

					.code {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.code_title {
						margin: 10rpx 0;
						font-size: 26rpx;
					}

					.map {
						width: 675rpx;
						height: 675rpx;
					}
				}

				.pick-up_address {
					font-size: 26rpx;
					margin: 20rpx 0;

					.pick-up {
						color: #FF0000;
					}

					.ads {
						margin: 10rpx 0;
						line-height: 50rpx;
					}
				}

				.shipping_address {
					font-size: 26rpx;

					.shipping {
						color: #FFBF00;
					}

					.ads {
						margin: 10rpx 0;
						line-height: 50rpx;
					}
				}

				.user {
					font-size: 26rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
			
			.shop{
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				font-size: 26rpx;
				.shop_title{
					margin-bottom: 20rpx;
				}
				.shop_content{
					display: flex;
					justify-content: space-between;
					padding: 12rpx 0;
				}
			}
		}

		.footer {
			height: 70rpx;
			;
			line-height: 70rpx;
			font-size: 26rpx;
			background-color: #165DFF;
			color: #fff;
			text-align: center;
			border-radius: 8rpx;
		}
	}
</style>